<template>
    <div class='hot'>
        <div class="title"> <span class='iconfont love'>&#xe632;</span> 猜你喜欢</div>
        
          
        <div  v-for="item in recommend" :key="item.id" class='item border-bottom'>
            <router-link tag="div" :to="'/sense/'+item.id"  class="content">
                <div class="left">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="right">
                    <p class='area'>{{ item.title}}</p>
                    <p class='star'>
                        <span id='star'>★★★★★</span>
                        <span id='people'>56987人评论</span>
                    </p>
                    <p class='price'>
                        <span>￥<strong>295</strong> </span>
                        <span id='areainfo'>{{ item.desc}}</span>
                    </p>
                   
                </div>
            </router-link>
        </div>
          
      
         
    </div>
</template>


<script>
export default{
    props:['recommend']
}
    
</script>

<style lang="scss" scoped>
@import '../../css/sass/common.scss';
.hot{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  .title{
      width:100%;
     
    padding: .24rem 0 .26rem;
    height: .44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
    .love{
        padding-left: 0.2rem;
    }
  }
  .item{
    
      .content{
           display:flex;
        padding:0.2rem;
     height: 100%;
      width: 100%;
      flex-wrap: wrap;
      box-sizing: border-box;
      }
     
      .left{
          height: 100%;
          img{
              width:pt(100);
              height: pt(100);
          }
      }
      .right{
          margin-left: 0.2rem;
          p{
              padding-top: 0.3rem;
          }
          .area{
              font-size: 0.32rem;
            
              line-height: 0.24rem;
          }
          .star{
              padding-top: 0.2rem;
              span{
                  padding-left: 0.4rem;
              }
              #star{
                  color: #FFB436;
                  padding-left: 0;
              }
              #people{
                  font-size: 0.22rem;
              }
          }
          .price{
              display: flex;
              justify-content: space-between;
              align-items: center;
              color:#FF8300;
              width: 130%;
             
            strong{
                     font-size: .4rem;
              }
              #areainfo{
                  color:#616161;
                  @include pf();
                  width: 1.2rem;
                  font-size: .24rem;
              }
          }
          .info{
             
              
              padding-top: pt(34);
              color: #FF797A;
          }
      }
  }
}

</style>

